import "./index.less";
import { Form, Input, Dropdown, Menu, Space, Tree } from "antd";
import type { DataNode } from "antd/es/tree";
import { useEffect, useState } from "react";
import { getRole } from "@/api/system/role/index";
import { useTranslation } from "react-i18next";
import Icon from "@/components/Icon";
const { Item } = Form;
const { Search } = Input;
interface TableProps {
	id: number;
}

const menuPermission: React.FC<TableProps> = ({ id }) => {
	const { t } = useTranslation();
	const [data, setData] = useState({});
	const menu = (
		<Menu>
			<Menu.Item>{t("system.role.select_all")}</Menu.Item>
			<Menu.Item>{t("system.role.deselect_all")}</Menu.Item>
			<Menu.Item>{t("system.role.expand_all")}</Menu.Item>
			<Menu.Item>{t("system.role.collapse_all")}</Menu.Item>
		</Menu>
	);
	const treeData: DataNode[] = [
		{
			title: t("system.role.system_management"),
			key: "0-0",
			children: [
				{
					title: t("system.role.tenant_management"),
					key: "0-0-0",
					children: [
						{
							title: "leaf",
							key: "0-0-0-0"
						},
						{
							title: "leaf",
							key: "0-0-0-1"
						}
					]
				},
				{
					title: "parent 1-1",
					key: "0-0-1",
					children: [{ title: <span style={{ color: "#1890ff" }}>sss</span>, key: "0-0-1-0" }]
				}
			]
		}
	];
	useEffect(() => {
		console.log(id);
		getRole(id).then(res => {
			console.log(res);
			setData(res);
		});
	}, [id]);
	return (
		<>
			<Form className="newAddFrom">
				<Item label={t("system.role.role_name")}>
					<Input placeholder={data.name} disabled></Input>
				</Item>
				<Item label={t("system.role.role_identifier")}>
					<Input placeholder={data.code} disabled></Input>
				</Item>
				<Item label={t("system.role.role_identifier")} className="menu">
					<div className="menuAllocation">
						<p>{t("system.role.menu_allocation")}</p>
						<Search></Search>
					</div>
					<Dropdown overlay={menu}>
						<a onClick={e => e.preventDefault()}>
							<Space>
								<Icon icon="ant-design:more-outlined" />
							</Space>
						</a>
					</Dropdown>
				</Item>
				<Item>
					<Tree
						checkable
						defaultExpandedKeys={["0-0-0", "0-0-1"]}
						defaultSelectedKeys={["0-0-0", "0-0-1"]}
						defaultCheckedKeys={["0-0-0", "0-0-1"]}
						treeData={treeData}
					/>
				</Item>
			</Form>
		</>
	);
};
export default menuPermission;
